<template>
  <span class="report-menu">
    <template v-for="(item, index) in list" :key="index">
      <span class="report-menu-btn" @click="itemClick(item)">
      <i :class="hookXrSystemIcon.getXrIcon(item.type)"
         :style="{ color: hookXrSystemIcon.getXrIconColor(item.type) }"
         class="report-menu-btn__icon"/>
      <span class="report-menu-btn__name">{{ item.name }}</span>
    </span>
    </template>

  </span>
</template>

<script setup>
import {useXrSystemIconHook} from "@/hooks/useXrSystemIconHook.js";

defineOptions({
  // 日志简报菜单
  name: 'ReportMenu',
})

const emits = defineEmits(['select'])
const hookXrSystemIcon = useXrSystemIconHook()

const props = defineProps({
  list: Array
})

function itemClick(item) {
  emits('select', item)
}
</script>

<style lang="scss" scoped>
.report-menu {

  &-btn {
    display: inline-block;
    padding: 5px 10px;
    background-color: $xr--background-color-base;
    font-size: 13px;
    color: #333;
    border-radius: 13px;
    cursor: pointer;

    &__icon {
      font-size: 12px;
    }

    &__name {
      margin-left: 3px;
    }

    &:hover {
      background-color: #ecf1ff;
    }
  }

  &-btn {
    margin-right: 20px;
    margin-bottom: 8px;
  }

}
</style>
